

<!doctype html>
<html ng-app="scopeInheritance">
<head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script type="text/css">
        div .spicy div {
            padding: 10px;
            border: solid 2px blue;
        }
    </script>
</head>
<body>
<div ng-app="scopeInheritance" class="spicy">
    <div ng-controller="MainCtrl">
        <p>Good {{timeOfDay}}, {{name}}!</p>

        <div ng-controller="ChildCtrl">
            <p>Good {{timeOfDay}}, {{name}} !</p>

            <div ng-controller="GrandChildCtrl">
                <p>Good {{timeOfDay}}, {{name}}!</p>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    var myApp = angular.module('scopeInheritance', []);
    myApp.controller('MainCtrl', ['$scope', function($scope){
        $scope.timeOfDay = 'morning';
        $scope.name = 'Nikki';
    }]);
    myApp.controller('ChildCtrl', ['$scope', function($scope){
        $scope.name = 'Mattie';
    }]);
    myApp.controller('GrandChildCtrl', ['$scope', function($scope){
        $scope.timeOfDay = 'evening';
        $scope.name = 'Gingerbreak Baby';
    }]);
</script>
</html>

